<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background: linear-gradient(135deg, #1e3a8a, #1e1e1e);
            color: white;
            font-family: 'Arial', sans-serif;
            overflow-x: hidden;
        }
        .chart-container {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="min-h-screen p-6">
    <div class="container mx-auto">
        <h1 class="text-4xl font-bold text-center mb-8">数据可视化大屏</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 图表 1: 销售趋势折线图 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4">销售趋势</h2>
                <canvas id="salesTrendChart"></canvas>
            </div>
            <!-- 图表 2: 产品分类饼图 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4">产品分类</h2>
                <canvas id="productPieChart"></canvas>
            </div>
            <!-- 图表 3: 用户增长柱状图 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4">用户增长</h2>
                <canvas id="userGrowthChart"></canvas>
            </div>
            <!-- 图表 4: 区域分布柱状图 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4">区域分布</h2>
                <canvas id="regionBarChart"></canvas>
            </div>
            <!-- 图表 5: 实时访问量折线图 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4">实时访问量</h2>
                <canvas id="realTimeVisitChart"></canvas>
            </div>
            <!-- 图表 6: 价格与销量散点图 -->
            <div class="chart-container">
                <h2 class="text-xl font-semibold mb-4">价格与销量</h2>
                <canvas id="priceSalesScatterChart"></canvas>
            </div>
        </div>
    </div>

    <script>
        // 随机数据生成函数
        function getRandomData(length, min, max) {
            return Array.from({ length }, () => Math.floor(Math.random() * (max - min + 1)) + min);
        }

        // 图表 1: 销售趋势折线图
        const salesTrendChart = new Chart(document.getElementById('salesTrendChart'), {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '销售额 (万元)',
                    data: getRandomData(6, 50, 200),
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.2)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });

        // 图表 2: 产品分类饼图
        const productPieChart = new Chart(document.getElementById('productPieChart'), {
            type: 'pie',
            data: {
                labels: ['电子产品', '服装', '家居', '食品'],
                datasets: [{
                    data: getRandomData(4, 10, 50),
                    backgroundColor: ['#ef4444', '#f59e0b', '#10b981', '#3b82f6']
                }]
            },
            options: {
                responsive: true
            }
        });

        // 图表 3: 用户增长柱状图
        const userGrowthChart = new Chart(document.getElementById('userGrowthChart'), {
            type: 'bar',
            data: {
                labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                datasets: [{
                    label: '新增用户 (千)',
                    data: getRandomData(4, 20, 100),
                    backgroundColor: '#8b5cf6'
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });

        // 图表 4: 区域分布柱状图
        const regionBarChart = new Chart(document.getElementById('regionBarChart'), {
            type: 'bar',
            data: {
                labels: ['华北', '华东', '华南', '西南'],
                datasets: [{
                    label: '销售量 (千件)',
                    data: getRandomData(4, 30, 150),
                    backgroundColor: '#f59e0b'
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });

        // 图表 5: 实时访问量折线图
        const realTimeVisitChart = new Chart(document.getElementById('realTimeVisitChart'), {
            type: 'line',
            data: {
                labels: Array(10).fill().map((_, i) => `T-${9-i}`),
                datasets: [{
                    label: '访问量',
                    data: getRandomData(10, 100, 500),
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.2)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });

        // 图表 6: 价格与销量散点图
        const priceSalesScatterChart = new Chart(document.getElementById('priceSalesScatterChart'), {
            type: 'scatter',
            data: {
                datasets: [{
                    label: '价格 vs 销量',
                    data: Array.from({ length: 20 }, () => ({
                        x: Math.random() * 1000, // 价格 (0-1000元)
                        y: Math.random() * 500 // 销量 (0-500件)
                    })),
                    backgroundColor: '#ec4899',
                    pointRadius: 6
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        title: { display: true, text: '价格 (元)', color: '#fff' },
                        beginAtZero: true
                    },
                    y: {
                        title: { display: true, text: '销量 (件)', color: '#fff' },
                        beginAtZero: true
                    }
                }
            }
        });

        // 动态更新实时访问量
        setInterval(() => {
            realTimeVisitChart.data.datasets[0].data.shift();
            realTimeVisitChart.data.datasets[0].data.push(Math.floor(Math.random() * 400) + 100);
            realTimeVisitChart.data.labels.shift();
            realTimeVisitChart.data.labels.push(`T-${new Date().getSeconds()}`);
            realTimeVisitChart.update();
        }, 2000);
    </script>
</body>
</html>